<template>
  <div>
    <Header></Header>
    <!--广告图片区-->
    <div class="article">
      <img src="https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/jobManager/middle.jpg" width="100%"/>
    </div>
    <!--广告图片区-->
    <!--单位注册区-->
    <div class="article" style="margin-bottom: 20px;">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-card style="min-height: 1200px;overflow:visible;">
            <div slot="header" class="clearfix">
              <el-divider>细实厚达！致干达道！</el-divider>
            </div>
            <el-steps :active="active" finish-status="success">
              <el-step  icon="el-icon-view" title="看介绍" />
              <el-step  icon="el-icon-edit" title="你须知" />
              <el-step  icon="el-icon-s-check"  title="待审核" />
            </el-steps>
            <div  v-show="active == 1">
              <el-image
                  style="width: 100%; height: 950px;"
                  src="https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/images/school_info.png"
                  fit="fit"></el-image>
            </div>
            <el-form
                ref="dataForm"
                :model="formData"
                :rules="rules"
                label-position="left"
                label-width="100px"
                style="width: 400px;margin-left: 50px">
              <div v-show="active == 3" style="padding-top: 40px;">
                  <el-form-item label="公司名称" prop="name" label-width="100px">
                    <el-input v-model="formData.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="公司负责人"  prop="contact" label-width="100px">
                    <el-input v-model="formData.contact" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="公司logo"  prop="logo" label-width="100px">
                    <el-input v-model="formData.logo" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="注册资金"  prop="registerMoney" label-width="100px">
                    <el-input v-model="formData.registerMoney" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="公司电话"  prop="telephone" label-width="100px">
                    <el-input v-model="formData.telephone" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="公司邮件"  prop="email" label-width="100px">
                    <el-input v-model="formData.email" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="公司地址"  prop="addr" label-width="100px">
                    <el-input v-model="formData.addr" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="公司网址"  prop="url" label-width="100px">
                     <el-input v-model="formData.url" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="公司规模"  prop="size" label-width="100px">
                    <el-select v-model="formData.size" placeholder="请选择公司规模">
                      <el-option v-for="item in companySizeDictList" :key="item.id" :label="item.dictKey" :value="item.dictVal"/>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="公司类型"  prop="type" label-width="100px">
                    <el-select v-model="formData.type" placeholder="请选择公司类型">
                      <el-option v-for="item in companyTypeDictList " :key="item.id" :label="item.dictKey" :value="item.dictVal"/>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="公司简述" prop="description" label-width="100px">
                    <el-input type="textarea" v-model="formData.description"></el-input>
                  </el-form-item>
                  <el-form-item label="创建时间" prop="created">
                    <div class="block">
                      <el-date-picker
                          v-model="formData.created"
                          type="date"
                          placeholder="选择日期">
                      </el-date-picker>
                    </div>
                  </el-form-item>
                <el-button style="text-align: center" type="primary" icon="el-icon-s-promotion"  @click="handleCompanyRegister('dataForm')" size="medium">提交注册申请</el-button>
              </div>
              <div v-show="active == 2">
                  <div style="text-align: center;margin-left: 130px; width: 100%;">
                    <el-result icon="warning" title="审核说明"
                               subTitle="请您认真检查一下，公司基本信息填写是否准确?如确定无误,请点击下方按钮，后台工作人员会认真审核您的信息，如符合我校要求，相关事宜会依据您填写的邮箱告知您！">
                      <template slot="extra">
                      </template>
                    </el-result>
                  </div>
              </div>
            </el-form>
          <div style="text-align: center">
            <el-button icon="el-icon-back" v-if="active > 1" style="margin-top: 12px" @click="pre">上一步</el-button>
            <el-button icon="el-icon-right"  v-if="active < 3" style="margin-top: 12px" @click="next">下一步</el-button>
          </div>
          </el-card>
        </el-col>
        <!--职位列表-->
        <!--热点文章展示区-->
        <el-col :span="8">
          <!--热点文章的卡片区-->
          <el-row :gutter="20">
            <HotArticle></HotArticle>
          </el-row>
          <!--热点文章的卡片区-->
        </el-col>
        <!--热点文章展示区-->
      </el-row>
    </div>
    <!--单位注册区-->
    <Footer></Footer>
  </div>
</template>

<script>

    import '../assets/css/styles.css'
    import Header from "@/front/inc/Header";
    import Footer from "@/front/inc/Footer";
    import HotArticle from "@/front/inc/HotArticle";
    import {findDictListByTypeId} from "@/api/dict";
    import {registerCompany} from "@/api/company";

export default {
  name: "CompanyRegister",
  components: {HotArticle, Footer, Header},
  data(){
    return {
       formData:{
         status: 0,
         url:"无",
         logo:"无"
       },//表单数据
        rules: {//表单的校验规则
          name: [{required: true, message: '请输入公司名称', trigger: 'blur'}],
          contact: [{required: true, message: '请输入公司负责人姓名', trigger: 'blur'}],
          telephone: [{required: true, message: '请输入公司联系电话', trigger: 'blur'}],
          email: [{required: true, message: '请输入公司邮箱', trigger: 'blur'}],
          registerMoney: [{required: true, message: '请输入公司注册资金', trigger: 'blur'}],
          addr: [{required: true, message: '请输入公司地址', trigger: 'blur'}],
          logo: [{required: true, message: '请输入公司logo', trigger: 'blur'}],
          url: [{required: true, message: '请输入公司网址', trigger: 'blur'}],
          size: [{required: true, message: '请输入公司规模', trigger: 'blur'}],
          type: [{required: true, message: '请输入公司类型', trigger: 'blur'}],
          description: [{required: true, message: '请输入公司简述', trigger: 'blur'}],
          status: [{required: true, message: '请输入公司状态', trigger: 'blur'}],
          created: [{required: true, message: '请输入公司创立时间', trigger: 'blur'}],
        },
      active: 1,  //分步骤块默认第一步
      registerBtn:true, // 注册公司Div显示状态
      companyTypeDictList:[], //公司类型字典集合
      companySizeDictList:[], // 获取公司规模字典集合
    }
  },
  mounted() {
    this.findCompanyTypeDictList();
    this.findCompanySizeDictList();

  },
  methods:{
    //获取公司类型字典集合
    findCompanyTypeDictList(){
      findDictListByTypeId(4).then(res=>{
        this.companyTypeDictList = res.data;
      });
    },
    //获取公司规模字典集合
    findCompanySizeDictList(){
      findDictListByTypeId(5).then(res=>{
        this.companySizeDictList = res.data;
      })
    },
    // 步骤条下一步的方法
    next() {
      if (this.active++ > 3) this.active = 1
    },
    // 步骤条上一步的方法
    pre() {
      if (this.active-- < 2) this.active = 1
    },
    //处理公司注册的方法
    handleCompanyRegister(formName){
      console.info("【系统正在进行公司注册....】")
      //表单校验
      this.$refs[formName].validate((valid) => {
        if (valid) {
          registerCompany(this.formData).then(res=>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                //跳转到首页
                this.$router.push("/index");
              }
            });
          })
        }
      });
      console.info("【======系统公司注册成功！====】")
    }
  },
}



</script>

<style scoped>

</style>
